<template>
  <div class="header">
    <!-- 头部导航样式 -->
    <div class="site-topbar">
      <div class="container">
        <div class="topbar-nav">
          <a rel="" href="#">小米商城</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">MIUI</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">IoT</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">云服务</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">天星数科</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">有品</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">小爱开放平台</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">企业团购</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">资质证照</a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">协议规则</a>
          <span class="sep">|</span>
          <!-- 处理下载app的样式 -->
          <a
            rel=""
            href="#"
            target="_blank"
            class="topbar-download"
            id="J_siteDownloadApp"
          >
            下载app
            <!-- <span class="appcode">
              <img
                src="//i1.mifile.cn/f/i/17/appdownload/download.png?1"
                alt="小米商城"
                width="90"
                height="90"
              />
              小米商城APP
            </span> -->
          </a>
          <span class="sep">|</span>
          <a rel="" href="#" target="_blank">Select Location</a>
        </div>
        <!-- 导航条右边的样式购物车的样式  -->
        <div class="topbar-cart">
          <router-link to="/shopCart" rel="" class="cart-mini">
            <em class="iconfont icon-gouwuchekong"></em>
            <em class="iconfont-cart-full hide"></em>
            购物车
            <span class="cart-mini-num J_cartNum"></span>
            <em class="iconfont-cart-full hide"></em>
            <span class="cart-mini-num J_cartNum">（{{ goodsNum }}）</span>
          </router-link>
        </div>
        <!-- 登陆页面 -->
        <div class="topbar-info">
          <span v-if="name">
            <router-link to="/login" class="link">
              小米商城欢迎您！ {{ name }}
            </router-link>
            <button @click="logout">退出登录</button>
          </span>
          <span v-else>
            <router-link to="/login" class="link">登陆</router-link>
          </span>
          <span class="sep">|</span>
          <router-link to="/register" class="link">注册</router-link>
          <span class="sep">|</span>
          <a href="#" class="link">消息通知</a>
        </div>
      </div>
    </div>
    <!-- log及其搜素功能 -->
    <div class="site-header">
      <div class="container">
        <!-- 左侧log -->
        <div class="header-logo">
          <router-link
            to="/home"
            class="logo ir"
            title="小米官网"
          ></router-link>
        </div>
        <!-- 中间的导航分类 -->
        <div class="header-nav">
          <!-- 导航分类 -->
          <ul class="nav-list clearfix">
            <li class="nav-category">
              <a href="#" class="link-category">
                <span class="text"></span>
              </a>
            </li>
            <li data-index="" class="nav-item nav-item-active">
              <a
                href="#;"
                class="link"
                @mouseenter="handleIsShow"
                @mouseleave="handleLeave"
              >
                <span class="text">小米手机</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">Redmi 红米</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">电视</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">笔记本</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">家电</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">路由器</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">服务</span>
              </a>
            </li>
            <li data-index="" class="nav-item">
              <a href="#;" class="link">
                <span class="text">社区</span>
              </a>
            </li>
          </ul>
        </div>

        <!-- 搜索框 -->
        <div class="header-search">
          <form class="search-form clearfix" @submit.prevent="toSearch">
            <input
              type="search"
              id="search"
              name="keyword"
              v-model="keyword"
              autocomplete="off"
              class="search-text"
            />
            <button class="search-btn">
              <em class="iconfont icon-sousuokuang"></em>
            </button>
            <!-- 内部显示的内容 -->
            <!-- <div id="J_keywordList" class="keyword-list hide">
              <ul class="result-list">
                <li data-key="小米 9">
                  <a href="//search.mi.com/search_%E5%B0%8F%E7%B1%B3%209">
                    <span class="keyword"></span>
                    小米 9
                  </a>
                </li>
                <li data-key="Redmi K20 pro">
                  <a href="//search.mi.com/search_Redmi%20K20%20pro">
                    <span class="keyword"></span>
                    Redmi K20 pro
                  </a>
                </li>
                <li data-key="Redmi K20">
                  <a href="//search.mi.com/search_Redmi%20K20">
                    <span class="keyword"></span>
                    Redmi K20
                  </a>
                </li>
                <li data-key="Redmi Note 7 Pro">
                  <a href="//search.mi.com/search_Redmi%20Note%207%20Pro">
                    <span class="keyword"></span>
                    Redmi Note 7 Pro
                  </a>
                </li>
                <li data-key="Redmi&nbsp;note&nbsp;7">
                  <a
                    href="//search.mi.com/search_Redmi%26nbsp%3Bnote%26nbsp%3B7"
                  >
                    <span class="keyword"></span>
                    Redmi&nbsp;note&nbsp;7
                  </a>
                </li>
                <li data-key="小米电视4c">
                  <a
                    href="//search.mi.com/search_%E5%B0%8F%E7%B1%B3%E7%94%B5%E8%A7%864c"
                  >
                    <span class="keyword"></span>
                    小米电视4c
                  </a>
                </li>
                <li data-key="电视32英寸">
                  <a
                    href="//search.mi.com/search_%E7%94%B5%E8%A7%8632%E8%8B%B1%E5%AF%B8"
                  >
                    <span class="keyword"></span>
                    电视32英寸
                  </a>
                </li>
                <li data-key="笔记本pro">
                  <a
                    href="//search.mi.com/search_%E7%AC%94%E8%AE%B0%E6%9C%ACpro"
                  >
                    <span class="keyword"></span>
                    笔记本pro
                  </a>
                </li>
                <li data-key="小爱音箱">
                  <a
                    href="//search.mi.com/search_%E5%B0%8F%E7%88%B1%E9%9F%B3%E7%AE%B1"
                  >
                    <span class="keyword"></span>
                    小爱音箱
                  </a>
                </li>
                <li data-key="净水器">
                  <a href="//search.mi.com/search_%E5%87%80%E6%B0%B4%E5%99%A8">
                    <span class="keyword"></span>
                    净水器
                  </a>
                </li>
              </ul>
            </div> -->
          </form>
        </div>
      </div>
      <!-- 导航的 切换 效果 -->
      <div class="header-nav-menu" style="display: block">
        <div class="container">
          <ul
            :class="{ 'children-list': true, clearfix: true, isshow: isShow }"
          >
            <li>
              <a href="#">
                <div class="figure figure-thumb">
                  <img src="./images/02.png" alt="" />
                </div>
                <div class="title">小米CC9</div>
                <p class="price">1799元起</p>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="figure figure-thumb">
                  <img src="./images/02.png" alt="" />
                </div>
                <div class="title">小米CC9</div>
                <p class="price">1799元起</p>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="figure figure-thumb">
                  <img src="./images/02.png" alt="" />
                </div>
                <div class="title">小米CC9</div>
                <p class="price">1799元起</p>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="figure figure-thumb">
                  <img src="./images/02.png" alt="" />
                </div>
                <div class="title">小米CC9</div>
                <p class="price">1799元起</p>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="figure figure-thumb">
                  <img src="./images/02.png" alt="" />
                </div>
                <div class="title">小米CC9</div>
                <p class="price">1799元起</p>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="figure figure-thumb">
                  <img src="./images/02.png" alt="" />
                </div>
                <div class="title">小米CC9</div>
                <p class="price">1799元起</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import TypeNav from '../TypeNav/'
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      isShow: false,
      keyword: '',
    }
  },
  methods: {
    ...mapActions('user', ['logout']),
    handleIsShow() {
      // 我们这里是控制 TarNav 的展示和隐藏功能
      this.isShow = true
      // this.$set(this.isShow, true)

      // console.log('进', this.isShow)
    },
    handleLeave() {
      this.isShow = false
      // console.log('出', this.isShow)
      // this.$set(this.isShow, false)
    },
    toSearch() {
      const { keyword } = this
      const location = {
        // 路由名称
        name: 'Search',
        query: this.$route.query,
      }
      // 不是所有的parmas 都需要生效  我们需要判断一下
      if (keyword) {
        // 记住我们这里用了路由参数的话 配置路由的时候我们一定要使用站位符/:xxxx
        location.params = {
          keyword,
        }
      }

      this.$router.history.push(location)
    },
  },
  computed: {
    // 获取我们存在localstorage中的数据
    ...mapState('user', ['name']),
    ...mapState({
      goodsNum: (state) => state.cart.cartList.length,
    }),
  },
  watch: {
    $route({ params }) {
      this.keyword = params.keyword
    },
  },
}
</script>

<style lang="less" scoped>
@import './icon/iconfont.css';

.site-topbar {
  position: relative;
  z-index: 30;
  height: 40px;
  font-size: 12px;
  color: #b0b0b0;
  background: #333;
}

/* 下面的 */
.site-topbar a {
  color: #b0b0b0;
  line-height: 40px;
  display: inline-block;
  zoom: 1;
  display: inline;
}

/* 下面的链接 去除样式  */
.site-topbar a:hover {
  color: #fff;
  text-decoration: none;
}

/* 分割线的样式  */
.site-topbar .sep {
  margin: 0 0.5em;
  color: #424242;
}

/* 导航条的样式 */
.site-topbar .topbar-nav {
  float: left;
  height: 40px;
  line-height: 40px;
}

/* 处理导航条 右边的样式购物车和登陆的的样式 */
.site-topbar .topbar-cart,
.site-topbar .topbar-info {
  position: relative;
  float: right;
  _display: inline;
  height: 40px;
}

.site-topbar .topbar-cart {
  width: 120px;
  margin-left: 15px;
}

.site-topbar .topbar-cart-filled .cart-mini {
  color: #fff;
  background: #ff6700;
}

.site-topbar .topbar-cart-active .cart-mini {
  color: #ff6700;
  background: #fff;
}

.site-topbar .topbar-info {
  line-height: 40px;
}

.site-topbar .topbar-info .link,
.site-topbar .topbar-info .user,
.site-topbar .topbar-info .message,
.site-topbar .topbar-info .sep {
  float: left;
}

.site-topbar .topbar-info .link {
  padding: 0 5px;
  text-align: center;
}

.site-topbar .topbar-info .sep {
  margin: 0;
}

.site-topbar .cart-mini {
  position: relative;
  z-index: 32;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #b0b0b0;
  background: #424242;
}

.site-topbar .cart-mini i {
  margin-right: 4px;
  font-size: 20px;
  line-height: 20px;
  vertical-align: -4px;
}

.site-topbar .cart-mini-num {
  margin-left: -4px;
}

.site-topbar .cart-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  z-index: 31;
  width: 316px;
  padding: 15px 0 0;
  color: #424242;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* hide的默认样式 */
.hide {
  display: none !important;
}
/* 头部导航条结束 */

/* 头部log 开始*/

// 导航分类

.site-header .nav-list {
  position: relative;
  z-index: 10;
  float: left;
  width: 1100px;
  height: 88px;
  margin: 0;
  padding: 12px 0 0 30px;
  list-style-type: none;
  font-size: 16px;
}

// logo图的展示
.site-header .header-logo {
  float: left;
  width: 62px;
  margin-top: 22px;
}

.site-header .logo {
  position: relative;
  display: block;
  width: 55px;
  height: 55px;
  overflow: hidden;
  background-color: #ff6700;
  border-radius: 35%;
}

.site-header .logo:after,
.site-header .logo:before {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 55px;
  height: 55px;
  content: '';
  transform-origin: 50% 50%;
  transition: all 0.2s;
}

.site-header .logo:before {
  background: url(//s02.mifile.cn/assets/static/image/mi-logo.png) no-repeat 50%
    50%;
  opacity: 1;
}

.site-header .logo:after,
.site-header .logo:before {
  transform: translateZ(0);
}

.site-header .logo:after {
  background: url(//s02.mifile.cn/assets/static/image/mi-home.png) no-repeat 50%
    50%;
  opacity: 0;
  margin-left: -55px;
}

.site-header .logo:focus {
  outline: 0;
}

//  中间的导航分类的展示栏
.site-header .nav-category {
  position: relative;
  float: left;
  width: 127 px;
  padding-right: 15 px;
}

.site-header .header-nav-menu .children-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 12px;
  display: none;
}
.isshow {
  display: block !important;
}
.site-header .header-nav-menu .children-list li {
  position: relative;
  float: left;
  width: 180px;
  padding: 35px 12px 0;
  text-align: center;
}

.site-header .header-nav-menu .children-list li:before {
  position: absolute;
  left: 0;
  top: 35px;
  z-index: 1;
  width: 1px;
  height: 100px;
  content: '';
  background-color: #e0e0e0;
}

.site-header .header-nav-menu .children-list .first:before {
  display: none;
}

.site-header .header-nav-menu .figure-thumb {
  width: 160px;
  height: 110px;
  margin: 0 auto 16px;
  text-align: center;
}

// 图片
.site-header .header-nav-menu .figure-thumb img {
  width: 160px;
  height: 110px;
}

// a标签
.site-header .header-nav-menu .figure-thumb a {
  display: block;
}

// 文字
.site-header .header-nav-menu .title {
  margin: 0;
  line-height: 20px;
  color: #333;
}
//  文字和字体
.site-header .header-nav-menu .title,
.site-header .header-nav-menu .title a {
  color: #333;
}

.site-header .header-nav-menu .price {
  margin: 0;
  line-height: 20px;
  color: #ff6700;
}
// 每个导航项
.site-header .nav-item {
  float: left;
}
.site-header .nav-item .link {
  // 变成块级元素
  display: block;
  padding: 26px 10px 38px;
  color: #333;
  // 动画时间
  transition: color 0.2s;
}
.site-header .nav-category {
  position: relative;
  float: left;
  width: 127px;
  padding-right: 15px;
}

.site-header .nav-category .link-category {
  display: block;
  padding: 26px 0 38px;
  text-align: right;
  color: #333;
}

// 添加动画激活的效果
.site-header .nav-item-active {
  position: relative;
}

.site-header .nav-item-active .link {
  color: #ff6700;
}

.site-header .nav-item-active:after {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 600px;
  height: 40px;
  margin-left: -300px;
  content: '';
  background-color: transparent;
  // border: 1px solid red;
}

// header搜索框
.site-header .search-form {
  position: relative;
  width: 296px;
  height: 50px;
  z-index: 20;
}

// 左边的文字搜索框
.site-header .search-text {
  right: -900px;
  z-index: 1;
  width: 250px;
  height: 48px;
  padding: 0 10px;
  font-size: 14px;
  line-height: 48px;
}

.site-header .search-btn,
.site-header .search-text {
  position: absolute;
  top: 25px;
  border: 1px solid #e0e0e0;
  outline: 0;
  transition: all 0.2s;
}

.site-header .search-btn {
  right: -920px;
  z-index: 1;
  width: 52px;
  height: 48px;
  font-size: 24px;
  line-height: 24px;
  background: #fff;
  color: #616161;
}

.site-header .search-btn:hover {
  background: #ff6700;
  color: #fff;
}
</style>
